<template>
 <div id="app">
    <transition mode="out-in">
    <keep-alive :max="10">
    <!-- <component :is="coms[currentIndex]"/> -->
  </keep-alive>
    </transition>
    <!-- <div class="btn"> -->
        <!-- <span :class="{active:currentIndex==index}" @click="hand(index)" v-for="(item,index) in btns" :key="index">{{item}}</span> -->
    <!-- </div> -->
    <router-view></router-view>
    <div class="btn">
      <router-link to="/home">首页</router-link>
     <router-link to="/bao">爆爆团</router-link>
     <router-link to="/dingdan">订单</router-link>
     <router-link to="/mine">我的</router-link>
    </div>
    
  </div>
</template>

<script>
// import index from "./components/index.vue"
// import bao from "./components/bao.vue"
// import dingdan from "./components/dingdan.vue"
// import mine from "./components/mine.vue"


export default {
  data(){
    return {
      // currentIndex:0,
      // btns:["首页","爆爆团","订单","我的"],
      // coms:[index,bao,dingdan,mine]
    }
  },
  methods:{
      // hand(index){
      //   this.currentIndex=index
      // }
}
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
 .btn {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-top: 1px solid #ccc;
 }
 .router-link-exact-active {
  color: skyblue;
  font-weight: bold;
  font-size: 17px;
 }
 //--------设置切换页面动画------------
 .v-enter{ // 动画开始时的状态
  transform: rotate(0deg);
}
.v-enter-active{
  transition: all 0.2s;
}
.v-enter-to{ // 动画结束时的状态
  transform:  rotate(360deg);
}

//离场动画
.v-leave{ // 动画开始时的状态
  transform:  rotate(360deg);
}
.v-leave-active{
  transition: all 0.2s;
}
.v-leave-to{ // 动画结束时的状态
  transform:  rotate(0deg);
}
</style>
